import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
export default function Changjian() {
    const [show, setShow] = useState(false)
    const [text, setText] = useState(false)

    const [show1, setShow1] = useState(false)
    const [text1, setText1] = useState(false)

    const [show2, setShow2] = useState(false)
    const [text2, setText2] = useState(false)

    const [show3, setShow3] = useState(false)
    const [text3, setText3] = useState(false)

    const [show4, setShow4] = useState(false)
    const [text4, setText4] = useState(false)

    const [show5, setShow5] = useState(false)
    const [text5, setText5] = useState(false)

    const [show6, setShow6] = useState(false)
    const [text6, setText6] = useState(false)
    const navigate = useNavigate()
    return (
        <div>
            <div className="title">
                <span className='time'>9:41</span>
                <span className='time1'>
                    <svg t="1738566636213" className="icon" viewBox="0 0 1294 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2331" width="18" height="18"><path d="M0 727.578947l188.631579 0 0 296.421053-188.631579 0 0-296.421053Z" p-id="2332"></path><path d="M269.473684 565.894737l188.631579 0 0 458.105263-188.631579 0 0-458.105263Z" p-id="2333"></path><path d="M565.894737 377.263158l161.684211 0 0 646.736842-161.684211 0 0-646.736842Z" p-id="2334"></path><path d="M835.368421 188.631579l188.631579 0 0 835.368421-188.631579 0 0-835.368421Z" p-id="2335"></path><path d="M1104.842105 0l188.631579 0 0 1024-188.631579 0 0-1024Z" p-id="2336"></path></svg>
                </span>
                <span className='time2'>
                    <svg t="1738566688517" className="icon" viewBox="0 0 1346 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2497" width="18" height="18"><path d="M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z" p-id="2498" fill="#2c2c2c"></path></svg>
                </span>
                <span className='time3'>
                    <svg t="1738566728107" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4576" width="20" height="20"><path d="M915.264507 446.328301v-65.670675c0-36.264948-28.512381-65.670675-63.681368-65.670675H140.574642c-35.167964 0-63.681368 29.405727-63.681368 65.670675v262.682701c0 36.281321 28.513404 65.670675 63.681368 65.670676h711.00952c35.168987 0 63.681368-29.389354 63.681368-65.670676V577.669652c17.569144 0 31.840172-14.688537 31.840172-32.834826v-65.670675c-0.001023-18.11866-14.272052-32.835849-31.841195-32.83585m-31.841196 197.012026c0 18.148335-14.271028 32.834826-31.841196 32.834826H140.574642c-17.59882 0-31.841196-14.687514-31.841195-32.834826V380.658649c0-18.11866 14.242376-32.834826 31.841195-32.834826h711.00952c17.569144 0 31.840172 14.718213 31.840172 32.834826v262.681678h-0.001023z" fill="#2c2c2c" p-id="4577"></path><path d="M801.112654 643.340327h-610.299817c-28.399817 0-51.421136-23.022343-51.421137-51.421136V430.413843c0-28.399817 23.022343-51.421136 51.421137-51.421136h610.299817c28.399817 0 51.421136 23.022343 51.421136 51.421136v161.504324c0.001023 28.399817-23.02132 51.42216-51.421136 51.42216z" fill="#2c2c2c" p-id="4578"></path></svg>
                </span>
            </div>
            <div className='changjian-text'>
                <span onClick={() => { navigate('/shezhi') }}>
                    <svg t="1738590535521" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10628" width="24" height="24"><path d="M696.743385 224.697665l-315.804981 288.422211 315.804981 288.494461a28.148621 28.148621 0 0 1 0 39.845904c-11.018133 10.945883-28.900021 10.945883-39.954279 0l-336.107246-306.990475c-5.888379-5.888379-8.344881-13.619135-8.019756-21.34989-0.36125-7.658506 2.131377-15.389261 8.019756-21.277641l336.107246-306.990475c11.018133-10.945883 28.900021-10.945883 39.954279 0a28.083596 28.083596 0 0 1 0 39.845905z" fill="#515151" p-id="10629"></path></svg>
                </span>
                <h2>常见问题</h2>
            </div>
            <div>
                <div className='changjian-bottom'>
                    <div className='changjian-content'>
                        <span>1、问题标题1</span>
                        <div>
                            {
                                show ? <span onClick={() => {
                                    setShow(false), setText(false)
                                }}>
                                    <svg t="1738641509257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6766" width="18" height="18"><path d="M1011.2 706.4l-462.4-463.2c-8.8-8.8-19.99999999-12.8-31.2-12.8s-22.39999999 4-31.2 12.8l-473.6 474.4c-8 8-12.8 19.2-12.8 31.2s4.8 23.2 12.8 31.2c16.8 17.59999999 44.8 17.6 62.4 0L517.6 336.8l431.2 432c8 8 19.2 12.8 31.2 12.8s23.2-4.8 31.2-12.8S1024 749.6 1024 737.6s-4.8-22.4-12.8-31.2z" fill="#8a8a8a" p-id="6767"></path></svg>
                                </span>
                                    : <span onClick={() => { setShow(true), setText(true) }}>
                                        <svg t="1738593617440" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15281" width="18" height="18"><path d="M73.25 341.140625l406.40625 407.109375c7.734375 7.734375 17.57812499 11.25 27.42187501 11.25s19.68749999-3.515625 27.42187499-11.25l416.25-416.95312499c7.03125-7.03125 11.25-16.875 11.25-27.42187501s-4.21875-20.390625-11.24999999-27.421875c-14.765625-15.46874999-39.375-15.46875-54.84375001 1e-8L507.078125 665.984375l-378.984375-379.6875c-7.03125-7.03125-16.875-11.25-27.421875-11.25s-20.390625 4.21875-27.421875 11.25S62.00000001 303.171875 62 313.71875s4.21875 19.6875 11.25 27.421875z" fill="#8a8a8a" p-id="15282"></path></svg>
                                    </span>
                            }
                        </div>
                    </div>
                    <div className='changjian-content1'>
                        {
                            text ? '常见问题1常见问题1常见问题1常见问题1常见问题1常见问题1常见问题1常见问题1常见问题1常见问题1' : ''
                        }
                    </div>
                </div>
                <div className='changjian-bottom'>
                    <div className='changjian-content'>
                        <span>2、问题标题2</span>
                        <div>
                            {
                                show1 ? <span onClick={() => {
                                    setShow1(false), setText1(false)
                                }}>
                                    <svg t="1738641509257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6766" width="18" height="18"><path d="M1011.2 706.4l-462.4-463.2c-8.8-8.8-19.99999999-12.8-31.2-12.8s-22.39999999 4-31.2 12.8l-473.6 474.4c-8 8-12.8 19.2-12.8 31.2s4.8 23.2 12.8 31.2c16.8 17.59999999 44.8 17.6 62.4 0L517.6 336.8l431.2 432c8 8 19.2 12.8 31.2 12.8s23.2-4.8 31.2-12.8S1024 749.6 1024 737.6s-4.8-22.4-12.8-31.2z" fill="#8a8a8a" p-id="6767"></path></svg>
                                </span>
                                    : <span onClick={() => { setShow1(true), setText1(true) }}>
                                        <svg t="1738593617440" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15281" width="18" height="18"><path d="M73.25 341.140625l406.40625 407.109375c7.734375 7.734375 17.57812499 11.25 27.42187501 11.25s19.68749999-3.515625 27.42187499-11.25l416.25-416.95312499c7.03125-7.03125 11.25-16.875 11.25-27.42187501s-4.21875-20.390625-11.24999999-27.421875c-14.765625-15.46874999-39.375-15.46875-54.84375001 1e-8L507.078125 665.984375l-378.984375-379.6875c-7.03125-7.03125-16.875-11.25-27.421875-11.25s-20.390625 4.21875-27.421875 11.25S62.00000001 303.171875 62 313.71875s4.21875 19.6875 11.25 27.421875z" fill="#8a8a8a" p-id="15282"></path></svg>
                                    </span>
                            }
                        </div>
                    </div>
                    <div className='changjian-content1'>
                        {
                            text1 ? '常见问题2常见问题2常见问题2常见问题2常见问题2常见问题2常见问题2常见问题2' : ''
                        }
                    </div>
                </div>
                <div className='changjian-bottom'>
                    <div className='changjian-content'>
                        <span>3、问题标题3</span>
                        <div>
                            {
                                show2 ? <span onClick={() => {
                                    setShow2(false), setText2(false)
                                }}>
                                    <svg t="1738641509257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6766" width="18" height="18"><path d="M1011.2 706.4l-462.4-463.2c-8.8-8.8-19.99999999-12.8-31.2-12.8s-22.39999999 4-31.2 12.8l-473.6 474.4c-8 8-12.8 19.2-12.8 31.2s4.8 23.2 12.8 31.2c16.8 17.59999999 44.8 17.6 62.4 0L517.6 336.8l431.2 432c8 8 19.2 12.8 31.2 12.8s23.2-4.8 31.2-12.8S1024 749.6 1024 737.6s-4.8-22.4-12.8-31.2z" fill="#8a8a8a" p-id="6767"></path></svg>
                                </span>
                                    : <span onClick={() => { setShow2(true), setText2(true) }}>
                                        <svg t="1738593617440" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15281" width="18" height="18"><path d="M73.25 341.140625l406.40625 407.109375c7.734375 7.734375 17.57812499 11.25 27.42187501 11.25s19.68749999-3.515625 27.42187499-11.25l416.25-416.95312499c7.03125-7.03125 11.25-16.875 11.25-27.42187501s-4.21875-20.390625-11.24999999-27.421875c-14.765625-15.46874999-39.375-15.46875-54.84375001 1e-8L507.078125 665.984375l-378.984375-379.6875c-7.03125-7.03125-16.875-11.25-27.421875-11.25s-20.390625 4.21875-27.421875 11.25S62.00000001 303.171875 62 313.71875s4.21875 19.6875 11.25 27.421875z" fill="#8a8a8a" p-id="15282"></path></svg>
                                    </span>
                            }
                        </div>
                    </div>
                    <div className='changjian-content1'>
                        {
                            text2 ? '常见问题3常见问题3常见问题3常见问题3常见问题3常见问题3常见问题3常见问题3常见问题3' : ''
                        }
                    </div>
                </div>
                <div className='changjian-bottom'>
                    <div className='changjian-content'>
                        <span>4、问题标题4</span>
                        <div>
                            {
                                show3 ? <span onClick={() => {
                                    setShow3(false), setText3(false)
                                }}>
                                    <svg t="1738641509257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6766" width="18" height="18"><path d="M1011.2 706.4l-462.4-463.2c-8.8-8.8-19.99999999-12.8-31.2-12.8s-22.39999999 4-31.2 12.8l-473.6 474.4c-8 8-12.8 19.2-12.8 31.2s4.8 23.2 12.8 31.2c16.8 17.59999999 44.8 17.6 62.4 0L517.6 336.8l431.2 432c8 8 19.2 12.8 31.2 12.8s23.2-4.8 31.2-12.8S1024 749.6 1024 737.6s-4.8-22.4-12.8-31.2z" fill="#8a8a8a" p-id="6767"></path></svg>
                                </span>
                                    : <span onClick={() => { setShow3(true), setText3(true) }}>
                                        <svg t="1738593617440" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15281" width="18" height="18"><path d="M73.25 341.140625l406.40625 407.109375c7.734375 7.734375 17.57812499 11.25 27.42187501 11.25s19.68749999-3.515625 27.42187499-11.25l416.25-416.95312499c7.03125-7.03125 11.25-16.875 11.25-27.42187501s-4.21875-20.390625-11.24999999-27.421875c-14.765625-15.46874999-39.375-15.46875-54.84375001 1e-8L507.078125 665.984375l-378.984375-379.6875c-7.03125-7.03125-16.875-11.25-27.421875-11.25s-20.390625 4.21875-27.421875 11.25S62.00000001 303.171875 62 313.71875s4.21875 19.6875 11.25 27.421875z" fill="#8a8a8a" p-id="15282"></path></svg>
                                    </span>
                            }
                        </div>
                    </div>
                    <div className='changjian-content1'>
                        {
                            text3 ? '常见问题4常见问题4常见问题4常见问题4常见问题4常见问题4常见问题4常见问题4' : ''
                        }
                    </div>
                </div>
                <div className='changjian-bottom'>
                    <div className='changjian-content'>
                        <span>5、问题标题5</span>
                        <div>
                            {
                                show4 ? <span onClick={() => {
                                    setShow4(false), setText4(false)
                                }}>
                                    <svg t="1738641509257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6766" width="18" height="18"><path d="M1011.2 706.4l-462.4-463.2c-8.8-8.8-19.99999999-12.8-31.2-12.8s-22.39999999 4-31.2 12.8l-473.6 474.4c-8 8-12.8 19.2-12.8 31.2s4.8 23.2 12.8 31.2c16.8 17.59999999 44.8 17.6 62.4 0L517.6 336.8l431.2 432c8 8 19.2 12.8 31.2 12.8s23.2-4.8 31.2-12.8S1024 749.6 1024 737.6s-4.8-22.4-12.8-31.2z" fill="#8a8a8a" p-id="6767"></path></svg>
                                </span>
                                    : <span onClick={() => { setShow4(true), setText4(true) }}>
                                        <svg t="1738593617440" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15281" width="18" height="18"><path d="M73.25 341.140625l406.40625 407.109375c7.734375 7.734375 17.57812499 11.25 27.42187501 11.25s19.68749999-3.515625 27.42187499-11.25l416.25-416.95312499c7.03125-7.03125 11.25-16.875 11.25-27.42187501s-4.21875-20.390625-11.24999999-27.421875c-14.765625-15.46874999-39.375-15.46875-54.84375001 1e-8L507.078125 665.984375l-378.984375-379.6875c-7.03125-7.03125-16.875-11.25-27.421875-11.25s-20.390625 4.21875-27.421875 11.25S62.00000001 303.171875 62 313.71875s4.21875 19.6875 11.25 27.421875z" fill="#8a8a8a" p-id="15282"></path></svg>
                                    </span>
                            }
                        </div>
                    </div>
                    <div className='changjian-content1'>
                        {
                            text4 ? '常见问题5常见问题5常见问题5常见问题5常见问题5常见问题5常见问题5' : ''
                        }
                    </div>
                </div>
                <div className='changjian-bottom'>
                    <div className='changjian-content'>
                        <span>6、问题标题6</span>
                        <div>
                            {
                                show5 ? <span onClick={() => {
                                    setShow5(false), setText5(false)
                                }}>
                                    <svg t="1738641509257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6766" width="18" height="18"><path d="M1011.2 706.4l-462.4-463.2c-8.8-8.8-19.99999999-12.8-31.2-12.8s-22.39999999 4-31.2 12.8l-473.6 474.4c-8 8-12.8 19.2-12.8 31.2s4.8 23.2 12.8 31.2c16.8 17.59999999 44.8 17.6 62.4 0L517.6 336.8l431.2 432c8 8 19.2 12.8 31.2 12.8s23.2-4.8 31.2-12.8S1024 749.6 1024 737.6s-4.8-22.4-12.8-31.2z" fill="#8a8a8a" p-id="6767"></path></svg>
                                </span>
                                    : <span onClick={() => { setShow5(true), setText5(true) }}>
                                        <svg t="1738593617440" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15281" width="18" height="18"><path d="M73.25 341.140625l406.40625 407.109375c7.734375 7.734375 17.57812499 11.25 27.42187501 11.25s19.68749999-3.515625 27.42187499-11.25l416.25-416.95312499c7.03125-7.03125 11.25-16.875 11.25-27.42187501s-4.21875-20.390625-11.24999999-27.421875c-14.765625-15.46874999-39.375-15.46875-54.84375001 1e-8L507.078125 665.984375l-378.984375-379.6875c-7.03125-7.03125-16.875-11.25-27.421875-11.25s-20.390625 4.21875-27.421875 11.25S62.00000001 303.171875 62 313.71875s4.21875 19.6875 11.25 27.421875z" fill="#8a8a8a" p-id="15282"></path></svg>
                                    </span>
                            }
                        </div>
                    </div>
                    <div className='changjian-content1'>
                        {
                            text5 ? '常见问题6常见问题6常见问题6常见问题6常见问题6常见问题6常见问题6常见问题6' : ''
                        }
                    </div>
                </div>
                <div className='changjian-bottom'>
                    <div className='changjian-content'>
                        <span>7、问题标题7</span>
                        <div>
                            {
                                show6 ? <span onClick={() => {
                                    setShow6(false), setText6(false)
                                }}>
                                    <svg t="1738641509257" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6766" width="18" height="18"><path d="M1011.2 706.4l-462.4-463.2c-8.8-8.8-19.99999999-12.8-31.2-12.8s-22.39999999 4-31.2 12.8l-473.6 474.4c-8 8-12.8 19.2-12.8 31.2s4.8 23.2 12.8 31.2c16.8 17.59999999 44.8 17.6 62.4 0L517.6 336.8l431.2 432c8 8 19.2 12.8 31.2 12.8s23.2-4.8 31.2-12.8S1024 749.6 1024 737.6s-4.8-22.4-12.8-31.2z" fill="#8a8a8a" p-id="6767"></path></svg>
                                </span>
                                    : <span onClick={() => { setShow6(true), setText6(true) }}>
                                        <svg t="1738593617440" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15281" width="18" height="18"><path d="M73.25 341.140625l406.40625 407.109375c7.734375 7.734375 17.57812499 11.25 27.42187501 11.25s19.68749999-3.515625 27.42187499-11.25l416.25-416.95312499c7.03125-7.03125 11.25-16.875 11.25-27.42187501s-4.21875-20.390625-11.24999999-27.421875c-14.765625-15.46874999-39.375-15.46875-54.84375001 1e-8L507.078125 665.984375l-378.984375-379.6875c-7.03125-7.03125-16.875-11.25-27.421875-11.25s-20.390625 4.21875-27.421875 11.25S62.00000001 303.171875 62 313.71875s4.21875 19.6875 11.25 27.421875z" fill="#8a8a8a" p-id="15282"></path></svg>
                                    </span>
                            }
                        </div>
                    </div>
                    <div className='changjian-content1'>
                        {
                            text6 ? '常见问题7常见问题7常见问题7常见问题7常见问题7常见问题7常见问题7常见问题7' : ''
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}
